<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width"/>
    <title>盘古 α</title>
    <link rel="stylesheet" href="../static/demo.css">
    <link rel="stylesheet" href="../static/select.css">
</head>

<body>
<div class='main-container'>
    <h1 align="center" style="color:black ; font-size:50px  ">盘古 α</h1>
    <h2 align="center" style="color:#333 ; font-size:26px">全场景AI计算框架 MindSpore Demo（中文版）</h2>
    <br/>
    <div class="input-box " style="width: 80%; height: 100px; margin:0 auto;line-height:40px">
            <textarea class="input" name="" id="inputId" cols="30" rows="10"
                      style="white-space:pre-line; font-size:25px; height: 100px; "></textarea>
    </div>
    <div class="mid-box " style="height: 100px;margin:0 auto">
        <button type="button" class="btn" onclick="out()" style="font-size:30px;">生成</button>
    </div>
    <div class="output-box " style="width: 80%; height: 500px; margin:0 auto">
            <textarea class="output" type="text" value="" id="rsvp"
                      style="white-space:pre-line;font-size:25px;height: 500px;line-height:40px"></textarea>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    var value = "";
    var g_session_id = 0;
    var onTextareaKeydown = function (e) {
        if (e.keyCode == 9) {//缩进tab功能
            e.preventDefault();
            var start = this.selectionStart, end = this.selectionEnd;
            var text = this.value;
            var tab = "    ";
            text = text.substr(0, start) + tab + text.substr(start);
            this.value = text;
            this.selectionStart = start + tab.length;
            this.selectionEnd = end + tab.length;
        }
    }
    document.getElementById('inputId').onkeydown = onTextareaKeydown;

    function get_sentence(resp, sentence, session_id) {
        const payload = new URLSearchParams()
        payload.set("u", sentence)
        fetch('/query?' + payload.toString()).then(resp => resp.json()).then(rv => {
            if (session_id != g_session_id) {
                return;
            }
            if (rv.ok) {
                new_sentence = rv.rsvp;
                resp.innerHTML = new_sentence
                $(".output").val(resp.innerHTML);//请求结果放入输出框中
            } else {
                resp.innerHTML = "something is wrong.";
            }
        })
    }

    function out() {
        var input = $(".input").val()
        $(".output").val("");
        const resp = document.querySelector('#rsvp');
        if (input.trim() === '') {
            alert('empty input!')
            return
        }
        newText = input.replace(new RegExp(/(    )/g), "").replace(/\n/g, ' NEWLINE ');
        g_session_id += 1
        get_sentence(resp, newText, g_session_id)
    }
</script>
</body>

</html>